<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,ul,li,p{
            margin:0;
            padding:0;
        }

        body{
            height:8000px;
        }

        .skycat{
            top:0;
            width:100%;
            position:fixed;
            height:50px;
            background-color:#F60336;
        }

        .smallcat{
            width:90%;
            height:50px;
            margin:0 auto;
        }

        .ziti{
            font-size:18px;
            float:left;
            line-height:50px;
            color:white;
        }

        .ziti2{
            padding-left:5px;
        }

        .search{
            height:50px;
            width:60%;
            margin:0 auto;
        }


        .sousuo{
            margin-left:10px;
            width:87%;
            height:22px;
            font-size:12px;
            color:#666666;
            float:left;
            margin-top:11px;
        }
        
        .button{
            height:30px;
            width:50px;
            float:right;
            margin-top:11px;
            background-color:#F60336;
            color:white;
            border:none;
            outline:none;
        }

        input:focus::placeholder{
            color:rgb(204,204,204);
        }
    </style>
</head>
<body>
    <div class="skycat">
        <div class="smallcat">
                <div class="ziti">TMALL</div>
                <div class="ziti ziti2">天猫</div>
                
                <div class="search">
                    <button class="button">搜索</button>
                    <input type="text" class="sousuo" placeholder="搜索 天猫 商品/品牌/店铺">
                </div>
        </div>
    </div>
</body>
</html>